<template>
  <div id="user-scores">
    <div class="main-container container-fluid container-limited page-holder">
      <breadcrumb/>
      <div class="easy-container h4">
        当前积分：
        <span class="title">{{ totalScore }}</span>
      </div>
      <el-row :gutter="16">
        <el-col :sm="14">
          <el-table :data="scores" v-loading="isLoading" border class="thead-bg-color">
            <el-table-column label="时间" align="center" min-width="2">
              <template slot-scope="{ row }">
                <timeago :date-time="row.created_at" enable-type="realTime"
                         :time-format="['date', 'time', 'seconds']"/>
              </template>
            </el-table-column>
            <el-table-column label="变化" prop="score" align="center" min-width="1"/>
            <el-table-column label="原因" prop="description" align="center" min-width="2"/>
          </el-table>
          <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
        </el-col>
        <el-col :sm="10" class="hidden-xs-only">
          <p v-for="rule in scoreRules" :key="rule" v-html="rule"></p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserScores', // 用户积分
  data() {
    return {
      scores: [],
      totalScore: 0, // 当前积分
      isLoading: false,
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
      scoreRules: '',
    };
  },
  computed: {
    initLoadParams() {
      return {
        userId: this.$store.state.currentUser.id,
        page: this.$route.query.page || 1,
      };
    },
  },
  methods: {
    // 获取用户积分记录
    loadScores() {
      this.isLoading = true;
      this.$api.users.scores(this.initLoadParams)
        .then((res) => {
          this.scores = res.data;
          this.totalScore = res.total_score;
          this.pagination.currentPage = res.kaminari.current_page;
          this.pagination.pageCount = res.kaminari.total_pages;
        })
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 获取积分规则
    loadScoreRules() {
      this.$api.other.scoreRules()
        .then((res) => { this.scoreRules = res.data; })
        .catch(() => {});
    },
  },
  created() {
    this.loadScores();
    this.loadScoreRules();
  },
  watch: {
    initLoadParams() { this.loadScores(); },
  },
};
</script>

<style></style>
